<template>
  <div>
    <el-container>
    <el-header>个人信息</el-header>
    <el-main>
      <el-row gutter=24>
        <el-col :span=12 >Name:{{name}}<el-input
          placeholder="请输入Name"
          v-model="input_name"
          clearable>
        </el-input></el-col>
        <el-col :span=12 >Sex:{{sex}}<el-input
          placeholder="请输入性别"
          v-model="input_sex"
          clearable>
        </el-input></el-col>
      </el-row>
      <el-button type="primary" plain @click="updateUserInfo">Update</el-button>
    </el-main>
  </el-container>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data () {
    return {
      ID: '',
      name: 'uzi',
      sex: '男',
      input_name: '',
      input_sex: ''

    }
  },
  created () {
    this.ID = localStorage.getItem('userID')
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/getUserInfo')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.dealUserInfo(xmlhttp.response)
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
    },
    dealUserInfo (res) {
      let item = JSON.parse(res)[0]
      console.log('gottenlen', item)
      this.name = item.name
      this.sex = item.sex
    },
    updateUserInfo () {
      // let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/refreshUserInfo')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID, name: this.input_name, sex: this.input_sex}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            if (xmlhttp.response === 'true') {
              alert('修改成功')
            } else {
              alert(xmlhttp.response)
            }
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
      location.reload()
    }
  }
}
</script>

<style scoped>
</style>
